<template>
  <div class="goods-details">

    <div class="card goods-details__goods">
      <div class="title">
        <i class="el-icon-s-goods" style="color: #2F88FF;" />
        {{ currentGoodsDetails?.goods?.goods_type?.name }}：{{ currentGoodsDetails?.goods?.name }}
      </div>

      <div class="info__content">
        <div class="info__content__block">
          <svg-icon icon-class="stock" class-name="goods-icon" />
          <div class="info__content__block__data">
            <div class="value">
              {{ currentGoodsDetails?.quantity }} ({{ currentGoodsDetails?.goods?.unit }})
            </div>

            <div class="key">库存数</div>
          </div>
        </div>

        <div class="info__content__block">
          <svg-icon icon-class="goods_unit" class-name="goods-icon" />
          <div class="info__content__block__data">
            <div class="value">
              {{ currentGoodsDetails?.goods?.unit }}
            </div>

            <div class="key">主计量单位</div>
          </div>
        </div>
      </div>
    </div>

    <div class="card goods-details__search">
      <el-form inline>
        <el-form-item label="库存变更类型">
          <el-select
            v-model="params.operate_type"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in operateTypeSelectorOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="库存变更类型">
          <el-select
            v-model="params.state"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in stateSelectorOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="记录时间">
          <el-date-picker
            v-model="params.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>

        <el-form-item>
          <el-button
            size="medium"
            type="danger"
            @click="handleReset"
          >重置</el-button>

          <el-button
            size="medium"
            type="primary"
            @click="handleSearch"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="card goods-details__content">
      <el-table
        v-loading="loading"
        :data="list"
        border
        stripe
      >
        <el-table-column
          label="物品名称"
          prop="goods_name"
          align="center"
        />

        <el-table-column
          label="库存变更类型"
          prop="operate_type"
          align="center"
        >
          <template v-slot="{ row }">
            <el-tag
              :type="operateType[row.operate_type].icon"
            >
              {{ operateType[row.operate_type].text }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
          label="库存变更数量"
          prop="adjust_quantity"
          align="center"
        >
          <template v-slot="{ row }">
            {{ row.adjust_quantity }} {{ row.unit_name }}
          </template>
        </el-table-column>

        <el-table-column
          label="库存变更原因/备注"
          prop="adjust_quantity"
          align="center"
        >
          <template v-slot="{ row }">
            <el-button
              type="text"
              @click="handleOpenReasonDialog(row)"
            >
              查看
            </el-button>
          </template>
        </el-table-column>

        <el-table-column
          label="变更前数量(主单位)"
          prop="old_quantity"
          align="center"
        >
          <template v-slot="{ row }">
            {{ row.old_quantity }}
          </template>
        </el-table-column>

        <el-table-column
          label="变更后数量(主单位)"
          prop="new_quantity"
          align="center"
        >
          <template v-slot="{ row }">
            {{ row.new_quantity }}
          </template>
        </el-table-column>

        <el-table-column
          label="变更时间"
          prop="adjust_time"
          align="center"
        />

        <el-table-column
          label="状态"
          prop="status"
          align="center"
        >
          <template v-slot="{ row }">
            <el-tag
              :type="stateSelectorOptions[row.status * 1]?.tag"
            >
              {{ stateSelectorOptions[row.status * 1]?.label }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div class="goods-details__content__pagination">
        <Pagination
          style="margin-top: 0; padding: 0;"
          :total="total"
          :limit="params.paginate"
          @pagination="pagination"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { getInAndOutRecords } from '@/api/officeSuppliesManagement'
import { mapGetters } from 'vuex'
import Pagination from '@/components/Pagination/index.vue'
import { sleep } from '@/utils'

export default {
  name: '',
  components: { Pagination },
  data() {
    return {
      params: {
        time: [],
        state: '',
        operate_type: '',
        page: 1,
        paginate: 10
      },
      total: 0,
      list: [],
      currentId: null,
      loading: false,
      pickerOptions: {
        disabledDate(time) {
          const now = Date.now()
          return time.getTime() > now
        }
      }
    }
  },

  computed: {
    ...mapGetters(['currentGoodsDetails']),
    operateType() {
      return {
        store: {
          text: '入库',
          icon: 'success'
        },
        outbound: {
          text: '出库',
          icon: 'danger'
        },
        hand: {
          text: '手动调整',
          icon: 'primary'
        }
      }
    },

    operateTypeSelectorOptions() {
      return [
        { label: '入库', value: 'store' },
        { label: '出库', value: 'outbound' },
        { label: '手动调整', value: 'hand' }
      ]
    },

    stateSelectorOptions() {
      return [
        { label: '待审核', value: 'wait', tag: 'warning' },
        { label: '审核成功', value: 'success', tag: 'success' },
        { label: '审核失败', value: 'failed', tag: 'danger' }
      ]
    }
  },

  created() {
    this.currentId = this.$route.query.id

    this.getGoodsDetails()
  },

  methods: {
    async getGoodsDetails() {
      this.loading = true
      try {
        const time = JSON.stringify(Array.isArray(this.params.time) ? this.params.time : [])
        const res = await getInAndOutRecords({
          id: this.currentId,
          ...this.params,
          time
        })
        console.log('res --------->', res)
        this.list = res.data.data
        this.total = res.data.total
      } catch (error) {
        this.$message.error(error?.message || '信息获取失败')
      } finally {
        await sleep(500)
        this.loading = false
      }
    },

    pagination(page) {
      this.params.page = page.page
      this.params.paginate = page.limit
      this.getGoodsDetails()
    },

    handleOpenReasonDialog(row) {
      this.$confirm(
        row.reason ?? '-',
        '库存变更原因/备注',
        {
          showCancelButton: false
        })
    },

    handleSearch() {
      this.params.page = 1
      this.getGoodsDetails()
    },

    handleReset() {
      this.params = this.$options.data().params
      this.getGoodsDetails()
    }
  }
}
</script>
<style lang="scss" scoped>
.goods-details {
  padding: 20px;

  &__search {
    padding-bottom: 0 !important;
    ::v-deep(.el-form-item) {
      margin-bottom: 20px;
      margin-right: 20px;
    }
  }

  &__goods {

    .title {
      font-size: 28px;
      font-weight: bold;
    }

    .info__content {
      margin-top: 20px;
      display: flex;

      &__block {
        display: flex;
        .goods-icon {
          height: 58px;
          width: 58px;
        }

        &__data {
          margin-left: 10px;
          margin-right: 20px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .value {
            font-size: 18px;
            font-weight: bold;
          }
        }
      }
    }
  }

  &__content {

    &__pagination {
      margin-top: 20px;
      display: flex;
      justify-content: end;
    }
  }

  .card {
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    margin-bottom: 20px;
  }
}
</style>
